<template>
  <div class="login-container">
    <h1 class="login-title">用户登录</h1>
    <form @submit.prevent="handleSubmit">
      <label for="username">账号：</label>
      <input v-model="username" type="text" id="username" placeholder="请输入账号" required>

      <label for="password">密码：</label>
      <input v-model="password" type="password" id="password" placeholder="请输入密码" required>

      <img :src="imgStr" alt="图片未上传" @click="getCaptcha"/>
      <label for="captcha">验证码：</label>
      <input v-model="codeVal" type="text" id="captcha" placeholder="请输入验证码" required>

      <button type="submit" :class="{ 'loading': loading }">登录</button>
    </form>
    <router-link to="/register" class="register-link">我还没有 账号，立即注册</router-link>
  </div>
</template>

<script>
import request from '@/utils/request'; // 根据你的目录结构适当调整 import 路径
export default {
  data() {
    return {
      username: 'zhangsan',
      password: '123456',
      captcha: '123',
      loading: false,
      codeKey: '',// 验证码的key
      codeVal: '',// 验证码的code
      imgStr: ""// 验证码图片
    };
  },
  //页面初始化时调用
  mounted() {
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      request.get('/captcha/captcha')
          .then(response => {
            this.imgStr = response.data.codeImg;
            this.codeKey = response.data.codeKey;
            this.codeVal = response.data.code;
          });
    },
    handleSubmit() {
      this.loading = true;

      let loginData = {
        account: this.username,
        password: this.password,
        codeKey: this.codeKey,
        codeVal: this.codeVal,
      };
      // 发送登录请求到后端API
      request.post('/user/login', loginData)
          .then(response => {
            // 处理登录成功后的逻辑，比如保存Token、跳转页面等
            console.log('登录成功', response);
            if (response.code === 200) {
              // 保存 token
              localStorage.setItem('token', response.data.token);
              console.log('登录成功，token 已保存');
              this.$message.success('登录成功！');
              this.$router.replace('/product-management'); // 登录成功后跳转
              // 其他逻辑，比如跳转页面等
            } else {
              console.error('登录失败:', response.msg);
              this.$message.error( response.msg);
            }
          });

    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 700px;
  margin: auto;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.login-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-top: 10px;
  color: #555;
}

input {
  width: 100%;
  height: 35px;
  padding: 5px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}

button {
  width: 100%;
  height: 40px;
  background-color: #0099cc;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button.loading {
  background-image: linear-gradient(to right, #007acc, #007acc), linear-gradient(to right, #0099cc, #0099cc);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

button:hover {
  background-color: #007acc;
}

.register-link {
  display: inline-block;
  margin-top: 10px;
  color: #0099cc;
  text-decoration: underline;
  cursor: pointer;
}
</style>
